import { RouteRecordRaw } from 'vue-router';
import { defineStore } from 'pinia'
import { Names } from './store-name'

export type UserInfo = {
    guid: string,
    mobile: string,
    name: string,
    role: string[],
    token: string,
}

export type global = {
    routeList: Array<RouteRecordRaw>,
    routeSet: Set<string>,
    theme: 'dark' | 'light',
    collapse: boolean,
    showNav: boolean,
    userInfo: UserInfo | any,
}

// 普通store第二参数为配置对象
// Setup Store 第二参数为函数
export default defineStore(Names.APP, () => {
    let state: global = reactive({
        routeList: [],
        routeSet: new Set(),
        theme: 'dark',
        collapse: false,
        showNav: true,
        userInfo: null,
    })
    const addRoute = (route: RouteRecordRaw): void => {
        const { routeSet } = state
        if (!routeSet.has(route.path)) {
            state.routeSet.add(route.path)
            state.routeList.push(route)
        }
    }
    const delRoute = (route: RouteRecordRaw): void => {
        const { routeList, routeSet } = state
        if (routeSet.has(route.path)) {
            state.routeSet.delete(route.path)
            state.routeList = routeList.filter(_ => _.path !== route.path)
        }
    }
    const setCollapse = (value: boolean) => {
        state.collapse = value
    }

    const setNavStatus = (value: boolean) => {
        state.showNav = value
    }

    const setUserInfo = (info: UserInfo) => {
        state.userInfo = info
    }

    return {
        ...toRefs(state),
        addRoute,
        delRoute,
        setCollapse,
        setNavStatus,
        setUserInfo,
    }
})